<template>
  <div class="todo-list">
    <ToDoListEditItem />
    <div class="todo-list-header">
      <span class="todo-list-user">{{ currentUserProfile.nick || currentUserProfile.userID }}的云待办</span>
      <span class="todo-list-num">当前待办：{{ currentToDoList.length }}</span>
      <span @click="addToDo" class="todo-list-add">新增 <i class="el-icon-plus"></i></span>
    </div>
    <div v-if="currentToDoList.length === 0" class="todo-list-tips">
      暂无待办事项
    </div>
    <div class="todo-list-content" v-for="todo in currentToDoList" :key="todo.todo_id">
      <header class="todo-header">
        <div class="todo-time">
          <span class="create-time">
            <i class="el-icon-setting"></i>创建：{{ translateTime(todo.create_time) }}
          </span>
          <span class="done-time">
            <i class="el-icon-s-tools"></i>完成：{{ todo.done_time ? translateTime(todo.done_time) : '未完成' }}
          </span>
          <span class="due-time" v-if="todo.due_time">
            <i class="el-icon-time"></i>预期：{{ translateDueTime(todo.due_time)  }}
          </span>
        </div>
        <div class="todo-importance">
          <span :style="`color:${importanceColorMap[todo.importance]};`">
            {{ importanceMap[todo.importance] }}
            <i class="el-icon-warning-outline"></i>
          </span>
        </div>
      </header>
      <div class="todo-content">
        <div class="title">
          {{ todo.title }}
        </div>
        <hr class="todo-hr"/>
        <div class="content">
          {{ todo.content }}
        </div>
      </div>
      <footer class="todo-footer">
        <div class="todo-tags">
          标签：{{ todo.tags.length > 0 ? '' : '无' }}
          <span v-for="(tags,index) in todo.tags" :key="tags">
            {{ index === 0 ? '' : ' / ' }}{{ tags }} 
          </span>
        </div>
        <div class="todo-button">
          <span @click="doneToDo(todo)" :class="todo.progress == 1 ? 'todo-button-done' : 'todo-button-undone'"><i class="el-icon-check"></i>完成</span>
          <span @click="editToDo(todo)" class="todo-button-edit"><i class="el-icon-edit-outline"></i>编辑</span>
          <span @click="removeToDo(todo)" class="todo-button-delete"><i class="el-icon-delete"></i>删除</span>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import ToDoListEditItem from './ToDoListEditItem.vue';
import { mapState } from 'vuex';
import { getFullDate, getDate } from '../../utils/date';
import { throttle } from '../../utils/functionOptimization';

export default {
  data(){
    return {
      importanceMap: {
        ImportantAndNotUrgent: '重要但不紧急',
        ImportantAndUrgent: '重要且紧急',
        UnimportantAndNotUrgent: '不重要且不紧急',
        UnimportantAndUrgent: '不重要但紧急'
      },
      importanceColorMap:{
        ImportantAndNotUrgent: '#409EFF',
        ImportantAndUrgent: '#F56C6C',
        UnimportantAndNotUrgent: '#67C23A',
        UnimportantAndUrgent: '#E6A23C'
      }
    }
  },
  components: {
    ToDoListEditItem
  },
  computed: {
    ...mapState({
      currentUserProfile: state => state.user.currentUserProfile,
      currentToDoList: state => state.todo.currentToDoList
    }),
    translateTime(){
      return function(time) {
        return getFullDate(new Date(time));
      }
    },
    translateDueTime(){
      return function(time){
        return getDate(new Date(time));
      }
    }
  },
  methods: {
    addToDo() {
      this.$store.commit('toggleIsToDoEidt', false);
      this.$store.commit('toggleIsToDoEditItemVisible', true);
    },
    doneToDo: throttle(
      // 使用节流函数，避免频繁修改
      function(todo){
        todo.done_time = todo.progress === 0 ? new Date().getTime() : 0;
        todo.progress = todo.progress === 0 ? 1 : 0;
        this.$store.dispatch('editToDo', todo);
      }, 
      1000
    ),
    editToDo(todo) {
      this.$store.commit('toggleIsToDoEidt', true);
      this.$store.commit('updateCurrentEditToDo', todo);
      this.$store.commit('toggleIsToDoEditItemVisible', true);
    },
    removeToDo(todo) {
      this.$store.dispatch('removeToDo', todo);
    }
  }
}
</script>

<style scoped>
.todo-list {
  padding-top: 100px;
  width: 70%;
  min-width: 360px;
  margin: 0 auto;
}
.todo-list-header {
  border-radius: 15px;
  background-color: white;
  line-height: 40px;
}
.todo-list-user {
  padding-left: 20px;
  cursor:default;
}
.todo-list-num {
  padding-left: 20px;
  cursor: default;
}
.todo-list-add {
  float: right;
  padding-right: 20px;
  cursor: pointer;
}
.todo-list-tips {
  border-radius: 15px;
  font-size: 20px;
  background-color: white;
  line-height: 60px;
  text-align: center;
  margin: 30px auto;
}
.todo-list-add,.done-time,.todo-tags,.todo-button-done { 
  color: #67C23A;
}
.todo-list-num,.due-time,.todo-button-undone {
  color: #E6A23C;
}
.todo-list-user,.create-time,.todo-button-edit {
  color: #409EFF;
}
.todo-list-tips,.todo-button-delete {
  color: #F56C6C;
}
.todo-list-content {
  border-radius: 15px;
  margin: 30px auto;
  background-color: white;
}
.todo-header,.todo-content,.todo-footer {
  position: relative;
  padding: 5px;
}
.todo-time,.title,.content,.todo-tags {
  padding: 5px 20px;
}
.todo-importance{
  position: absolute;
  right: 20px;
  top: 10px;
  cursor:default;
  font-weight:bold;
  background-color: white;

}
.todo-time {
  font-size: 14px;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.create-time,.done-time {
  padding-right: 5px;
}
.title {
  font-weight: bold;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content {
  color: #999;
  font-size: 16px;
}
.todo-hr {/*透明渐变水平线*/
  width:100%;
  margin:0 auto;
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(64, 158, 255, 0.5), rgba(0, 0, 0, 0));
}
.todo-button {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 16px;
  background-color: white;
}
.todo-button span {
  cursor: pointer;
  padding-left: 15px;
}
</style>